<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外出登记二维码</title>
</head>

<style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
}
    .header{
        height: 75px;
        line-height: 75px;
        text-align: center;
    }
    #Main{
        font-weight: bold;
    }
    .center ul{
        height: 180px;
        background-color: rgb(246,246,246);
        text-align: center;
    }
    .center ul img{
        height: 130px;
        width: 130px;
        margin-top: 22px;
    }
    .center li{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 14px;
    }
    .center li span{
        font-weight: bold;
    }
    .line{
        height: 12px;
        background:rgb(251,251,251);
        border-bottom: 1px solid rgb(243,243,243);
    }
    .footer{
        margin-top: 10px;
    }
    .footer ul{
        height: 46px;
        line-height: 46px;
        background-color: rgb(246,246,246);
        padding: 0 10px;
        color: rgb(184,184,184);
    }
    .footer li{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 15px;
        flex-wrap: wrap;
    }
    .footer li p {
        font-weight: bold;
    }
</style>

<body>
    <div class="header">
        <div id="Main"></div>
    </div>

    <div class="center">
        <ul>
            <img src="img.jpg" alt="">
        </ul>
        <p style="
            background-color: rgb(246,246,246);
            font-size: 12px;
            border-bottom: 1px solid rgb(243,243,243);
            padding: 10px 10px;
            color: rgb(205,205,205);">
            外出时间</p>

        <li>
            <p>离校时间</p>
            <span>2021-09-03 10:36</span>
        </li>

        <li>
            <p>回校时间</p>
            <span>2021-09-03 10:36</span>
        </li>

        <div class="line"></div>
    </div>

    <div class="footer">
        <ul>
            <p>学生信息</p>
        </ul>

        <li>
            <p>姓名</p>
            <span>余俊威</span>
        </li>

        <li>
            <p>学号</p>
            <span>3120009473</span>
        </li>

        <li>
            <p>学院</p>
            <span>国际教育学院</span>
        </li>

        <li>
            <p>专业</p>
            <span>计算机科学与技术(国际班)</span>
        </li>

        <li>
            <p>班级</p>
            <span>计算机科学与技术(国际班)20(2)</span>
        </li>
    </div>

    <div class="ccc" style="height: 100px; background-color: rgb(246,246,246);"></div>

    <script type="text/javascript">
        window.onload=function()
        {
            window.requestAnimationFrame(getDate)
        }
        
        function getDate()
        {
            window.setTimeout(function(){
                window.requestAnimationFrame(getDate)
            },1000/2)
            var d=new Date();   
            var year=d.getFullYear()  //获取年
            var month=d.getMonth()+1;  //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
            var day=d.getDay()    //获取日
            var days=d.getDate() //获取日期
            var hour=d.getHours()   //获取小时
            var minute=d.getMinutes()  //获取分钟
            var second=d.getSeconds()   //获取秒
            
            if(month<10) month="0"+month
            if(days<10) days="0"+days
            if(hour<10) hour="0"+hour
            if(minute<10) minute="0"+minute
            if(second<10) second="0"+second
            
            var Tools=document.getElementById("Main")
            var da=year+"-"+month+"-"+days+" "+" "+hour+":"+minute+":"+second
            Tools.innerHTML=da
        }
        
    </script>
</html>